<template>
  <div class="cretificate-main">
    <router-view></router-view>
    <!-- <el-row :gutter="5">
      <el-form ref="form" :model="batchdata">
        <el-col :xs="6" :sm="4" :xl="3">
          <div class="search-item" v-if="showtable">

            <el-form-item label="业务:" label-width="50px">
              <el-input
                v-model="batchdata.business"
                placeholder="请输入业务"
              ></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="6" :sm="4" :xl="3">
          <div class="search-item" v-if="showtable">
            <el-form-item label="申请人:" label-width="60px">
              <el-input v-model="batchdata.applicant" placeholder="请输入申请人"></el-input>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="search-item" v-if="showtable">
            <el-form-item label="网点:" label-width="60px">
              <el-select
                v-model="batchdata.branchNetworkId"
                placeholder="请选择网点"
                filterable
                @change="netgetdata"
              >
                <el-option
                  v-for="item in branchoptions"
                  :key="item.deptId"
                  :label="item.deptName"
                  :value="item.deptId"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>
        <el-col :xs="9" :sm="9" :xl="7">
          <div class="search-item">

            <el-form-item label="时间范围:" label-width="80px"
            >
              <el-date-picker
                class="picker"
                v-model="batchdata.starttimevalue"
                placeholder="选择开始时间"
                @change="starttime"
                :picker-options="timeChange"
              ></el-date-picker>
              <el-date-picker
                class="picker"
                v-model="batchdata.endtimevalue"
                placeholder="选择结束时间"
                @change="endtime"
                :picker-options="timeChange"
              ></el-date-picker>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="3">
          <div class="search-item" v-if="showchart">
            <el-form-item label="显示单位:">
              <el-select v-model="showunitvalue" placeholder="请选择" @change="showchange">
                <el-option
                  v-for="item in unitoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </el-col>

        <el-col :span="6">
          <div class="search-item">
            <el-button type="primary" icon="el-icon-search" @click="searchlink">搜索</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="restlink">重置</el-button>
          </div>
        </el-col>
      </el-form>
    </el-row>
    <el-row :gutter="5">
      <el-col class="batch-btn">
        <el-button
          type="success"
          icon="el-icon-download"
          @click="outexcelbtn"
          v-if="showtable"
        >导出Excel</el-button>
        <div class="searchdown">
          <label>数据显示方式：</label>
          <el-button
            type="primary"
            plain
            icon="element-icons iconfont icon-biaoge"
            @click="showtablebtn"
          >表格</el-button>
          <el-button
            type="primary"
            plain
            icon="element-icons iconfont icon-tubiao"
            @click="showchartbtn"
          >图表</el-button>
        </div>
      </el-col>
    </el-row>
    <ShowTable
      :tableData="tableData"
      v-if="showtable"
      @changetable="changetable"
      :toal="toal"
      ref="tablechild"
    ></ShowTable>
    <ShowChart v-if="showchart" ref="child"></ShowChart>-->
  </div> 
</template>

// <script>
// import ShowTable from "./showTable";
// import ShowChart from "./showChart";
// import {
//   getPagedata,
//   outExcel,
//   getChartData,
//   getnet,
// } from "../../api/datastac";
// import { mapMutations } from "vuex";
// import getExcel from "../../utils/outExcel/outExcel";
// export default {
//   name: "batchList",
//   components: {
//     ShowTable,
//     ShowChart,
//   },
//   data() {
//     return {
//       // 初始数据
//       batchdata: {
//         business: "",
//         applicant: "",
//         starttimevalue: "",
//         endtimevalue: "",
//         branchNetworkId: "",
//       },
//       timeChange: {
//         disabledDate(time) {
//           return (
//             time.getTime() < Date.now() - 3600 * 1000 * 24 * 183 ||
//             time.getTime() > Date.now()
//           ); //选择时间范围
//         },
//       },
//       toal: 0,
//       excelid: [],
//       classId: [],
//       branchvalue: "",
//       showunitvalue: "天",
//       chartunit: "",
//       showtable: true,
//       showchart: false,
//       branchoptions: [], //网点数据
//       unitoptions: [
//         {
//           value: "day",
//           label: "天",
//         },
//         {
//           value: "month",
//           label: "月",
//         },
//         {
//           value: "year",
//           label: "年",
//         },
//       ],
//       chartsdatas: {},
//       tableData: [],
//       chartData: [],
//       xdata: [],
//       dodata: [], //业务预约
//       makedata: [], //业务办理数

//       // 多条件查询图表数据
//       searchcharts: {
//         branchNetworkId: "",
//         unit: "day",
//         endDay: null,
//         startDay: null,
//       },
//       //多条件查询表格数据
//       serchtables: {
//         branchNetworkId: "",
//         business: "",
//         applicant: "",
//         startDate: "",
//         endDate: "",
//         pageSize: this.$store.state.pagedata.pageSize,
//         pageNum: this.$store.state.pagedata.pageNum,
//       },
//       pagedo: {
//         pageSize: 10,
//         pageNum: 1,
//       },
//     };
//   },
//   watch: {},
//   computed: {},
//   methods: {
//     ...mapMutations([
//       "setoutexcelId",
//       "setoutexcelclassId",
//       "changexdata",
//       "changedodata",
//       "changemakedata",
//       "changeunit",
//       "changePageSizeData",
//       "changePageNumeData",
//     ]),
//     // 显示单位
//     showchange() {
//       this.searchcharts.unit = this.showunitvalue;
//       getChartData(this.searchcharts).then((res) => {
//         if (res.data.code == 200) {
//           this.chartData = res.data.data;
//           this.chartsshowdo(this.chartData);
//           this.dyngetchartsdata();
//         }
//       });
//     },
//     // 向后端请求表格数据
//     getTableData(tabledata) {
//       getPagedata(tabledata)
//         .then((res) => {
//           this.toal = res.data.data.total;
//           this.tableData = res.data.data.list;
//           this.tableData.filter((item) => {
//             this.excelid.push(item.certId);
//             this.classId.push(item.classId);
//           });
//           this.setoutexcelId(this.excelid);
//           this.setoutexcelclassId(this.classId);
//         })
//         .catch((error) => {
//           error;
//         });
//     },
//     // 动态加载图表数据
//     dyngetchartsdata() {
//       this.chartsdatas = {
//         xdata: this.$store.state.xdata,
//         dodata: this.$store.state.dodata,
//         makedata: this.$store.state.makedata,
//         unit: this.$store.state.unit,
//       };

//       this.$refs.child.changedata(this.chartsdatas);
//     },
//     // 向后端请求图表数据
//     getChartDatado(chartsdata) {
//       getChartData(chartsdata).then((res) => {
//         if (res.data.code == 200) {
//           this.chartData = res.data.data;
//           this.chartsshowdo(this.chartData);
//         }
//       });
//     },
//     // 表格显示
//     showtablebtn() {
//       this.showtable = true;
//       this.showchart = false;
//     },
//     // 图表显示
//     showchartbtn() {
//       this.showtable = false;
//       this.showchart = true;
//       this.chartsshowdo(this.chartData);
//     },
//     changetable(val) {
//       this.tableData = val;
//     },
//     // 搜索
//     searchlink() {
//       // 检索图表数据
//       if (this.showchart) {
//         this.getChartDatado(this.searchcharts);
//       }
//       // 检索表格数据
//       if (this.showtable) {
//         this.serchtables.business = this.batchdata.business;
//         this.serchtables.applicant = this.batchdata.applicant;
//         this.getTableData(this.serchtables);
//         this.$refs.tablechild.changecurrentPage1(1);
//         this.changePageSizeData(20);
//         this.changePageNumeData(1);
//       }
//     },
//     // 重置
//     restlink() {
//       // 重置表格
//       if (this.showtable) {
//         this.getTableData({
//           pageSize: 10,
//           pageNum: 1,
//         });
//       }
//       // 重置图表
//       if (this.showchart) {
//       }
//     },
//     // 导出Excel
//     outexcelbtn() {
//       getExcel();
//     },
//     // 开始时间
//     starttime() {
//       this.searchcharts.startDay = this.timedispose(
//         this.batchdata.starttimevalue
//       );
//       this.serchtables.startDate = this.timedispose(
//         this.batchdata.starttimevalue
//       );
//     },
//     // 结束时间
//     endtime() {
//       this.searchcharts.endDay = this.timedispose(this.batchdata.endtimevalue);
//       this.serchtables.endDate = this.timedispose(this.batchdata.endtimevalue);
//     },
//     timedispose(time) {
//       let date = new Date(time);
//       return `${date.getFullYear()}-${this.zero(
//         date.getMonth() + 1
//       )}-${this.zero(date.getDate())} ${this.zero(date.getHours())}:${this.zero(
//         date.getMinutes()
//       )}:${this.zero(date.getSeconds())}`;
//     },
//     // 时间补零
//     zero(n) {
//       return n > 10 ? n : "0" + n;
//     },
//     // 处理图表数据显示
//     chartsshowdo(chartData) {
//       // 业务办理数据
//       if (chartData.banlilist) {
//         (this.dodata = []),
//           (this.xdata = []),
//           chartData.banlilist.forEach((item) => {
//             this.dodata.push(item.num);
//             let xstr = `${item.start} - ${item.late}`;
//             this.xdata.push(xstr);
//             this.chartunit = item.unit;
//           });
//       }
//       if (chartData.yuyuelist) {
//         chartData.yuyuelist.forEach((item) => {
//           (this.makedata = []), this.makedata.push(item.num);
//         });
//       }
//       this.changexdata(this.xdata);
//       this.changedodata(this.dodata);
//       this.changemakedata(this.makedata);
//       this.changeunit(this.chartunit);
//     },
//     // 获取网点
//     getnetdo() {
//       getnet().then((res) => {
//         if (res.data.code == 200) {
//           this.branchoptions = res.data.data;
//         }
//       });
//     },
//     // 选择网点
//     netgetdata() {
//       this.serchtables.branchNetworkId = this.batchdata.branchNetworkId;
//       this.searchcharts.branchNetworkId = this.batchdata.branchNetworkId;
//     },
//   },
//   mounted() {
//     this.getTableData(this.pagedo);
//     this.getChartDatado(this.searchcharts);
//     this.getnetdo();
//   },
// };
// </script>
// <style lang="less" scoped>
// @max1920: ~"(max-width: 1920px)";
// .cretificate-main {
//   width: 100%;
//   padding: 20px 10px;
//   box-sizing: border-box;
//   .search-item {
//     width: 100%;
//     margin: 10px 0;
//     /deep/.picker {
//       width: 45%;
//       margin-left: 10px;
//     }
//     .line-date {
//       display: inline-block;
//       padding-left: 5px;
//     }
//     /deep/.el-form-item__label {
//       color: #333;
//       font-weight: bold;
//       text-align: left;
//     }
//     /deep/.el-date-editor--date {
//       margin-left: 10px;
//       box-sizing: border-box;
//     }
//   }
//   .batch-btn {
//     // padding-left: 20px !important;
//     box-sizing: border-box;
//     .searchdown {
//       display: inline-block;
//       color: #333;
//       font-weight: bold;
//       margin-left: 30px;
//       /deep/.element-icons {
//         vertical-align: middle;
//         margin-right: 3px;
//       }
//     }
//   }
//   /deep/.el-table {
//     margin: 20px 0px;
//     box-sizing: border-box;
//   }
//   /deep/.el-pager .number {
//     background: #fff;
//     border: 1px solid #dcdfe6;
//     margin: 0 5px;
//     border-radius: 2px;
//     &.active {
//       background-color: #409eff;
//       color: #fff;
//       border: 1px solid #409eff;
//     }
//   }
// }
// </style>
